import { ElMessage, ElMessageBox, MessageBoxData } from 'element-plus';
import { h } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';

/**
 * 通用信息提示
 * @param msg - 提示的消息
 * @param type - 提示类型
 * @param showClose - 显示关闭按钮
 * @param options - 其它配置项
 */
export function generalMessage(
  msg: string,
  type: 'success' | 'error' | 'info' | 'warning' = 'success',
  showClose: boolean = true,
  options = {}
) {
  ElMessage({
    type: type,
    showClose: showClose,
    message: msg,
    ...options
  });
}

/**
 * 通用信息提示框
 * @param msg1 - 提示消息1
 * @param msg2 - 提示消息2
 * @param okHandle - 点击确定按钮的回调函数
 */
export function generalMessageBox(
  msg1: string,
  msg2: string,
  okHandle: (done: Function, instance: Object) => void
) {
  ElMessageBox({
    title: '操作确认',
    message: h('div', null, [
      h(
        'div',
        {
          style: 'padding-left:20px'
        },
        [
          h(
            'div',
            {
              style: 'display: flex;align-items: center;grid-column-gap: 12px;'
            },
            [
              h('div', [
                h(
                  'div',
                  {
                    style: 'display: flex;align-items: center;'
                  },
                  [
                    h('el-icon', [
                      h(WarningFilled, {
                        style: {
                          color: '#E6A23C',
                          width: '2em',
                          height: '2em'
                        }
                      })
                    ]),
                    h('div', { style: 'font-size:16px;margin-left:6px' }, `${msg1}`)
                  ]
                ),
                h(
                  'div',
                  {
                    style: 'font-size:14px;color:#999;margin-top:6px;margin-left:36px'
                  },
                  `${msg2}`
                )
              ])
            ]
          )
        ]
      )
    ]),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = 'Loading...';
        okHandle(done, instance);
      } else {
        done();
      }
    }
  }) // @ts-ignore
    .then((action: Object): void => {})
    // @ts-ignore
    .catch((err: Error) => {});
}

/**
 * 通用信息提示框
 * @param msg1 - 提示消息1
 * @param okHandle - 点击确定按钮的回调函数
 */
export function generalMessageBox1(
  msg1: string,
  okHandle: (done: Function, instance: Object) => void
) {
  ElMessageBox({
    title: '操作确认',
    message: h('div', null, [
      h(
        'div',
        {
          style: 'padding-left:20px'
        },
        [
          h(
            'div',
            {
              style: 'display: flex;align-items: center;grid-column-gap: 12px;'
            },
            [
              h('div', [
                h(
                  'div',
                  {
                    style: 'display: flex;align-items: center;'
                  },
                  [
                    h('el-icon', [
                      h(WarningFilled, {
                        style: {
                          color: '#E6A23C',
                          width: '2em',
                          height: '2em'
                        }
                      })
                    ]),
                    h('div', { style: 'font-size:16px;margin-left:6px' }, `${msg1}`)
                  ]
                )
              ])
            ]
          )
        ]
      )
    ]),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = 'Loading...';
        okHandle(done, instance);
      } else {
        done();
      }
    }
  })
    // @ts-ignore
    .then((action: MessageBoxData) => {})
    // @ts-ignore
    .catch((err: Error) => {});
}
